<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.rapid-framework.org.cn/rapid" prefix="rapid"%>

<rapid:override name="frame-content">
	<blockquote class="layui-elem-quote">
		<span class="layui-breadcrumb" lay-separator="/"> 
		<a href="Login">首页</a> <a href="user/userList">用户列表</a> <a><cite>编辑用户</cite></a>
		</span>
	</blockquote>
	<br>
	<br>
	<form class="layui-form" action="user/addUser" id="userForm" method="post"  enctype="multipart/form-data">
		<div class="layui-form-item">
			<label class="layui-form-label">头像</label>
			<div class="layui-input-inline">
				<div class="layui-upload">
					<div class="layui-upload-list" id="localImag">
						<img class="layui-upload-img" id="demo1" width="100" height="100">
					</div>

					<input type="file" name="photo" id="photo" type="file" style="display: none" onchange="preview(this,localImag,demo1,'100px','100px')">
					<button type="button" onclick="$('#photo').click()" class="layui-btn" id="test1">上传图片</button>
				</div>
			</div>
			<input type="hidden" name="userAvatar" id="userAvatar" value="">
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">用户名 
				<span style="color: #FF5722;">*</span>
			</label>
			<div class="layui-input-inline">
				<input type="text" name="userName" id="userName" required lay-verify="userName" autocomplete="off" class="layui-input" onblur="checkUserName()">
				<span style="color: #FF5722;" id="userName_msg"></span>
			</div>
			<div class="layui-form-mid layui-word-aux" id="userNameTips"></div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">密码 
				<span style="color: #FF5722;">*</span>
			</label>
			<div class="layui-input-inline">
				<input type="password" name="userPass" id="userPass" required lay-verify="userPass" autocomplete="off" class="layui-input" min="3" max="20">
				<span style="color: #FF5722;" id="userPass_msg"></span>
			</div>
			<div class="layui-form-mid layui-word-aux"></div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">昵称 
				<span style="color: #FF5722;">*</span>
			</label>
			<div class="layui-input-inline">
				<input type="text" name="userNickname" id="userNickname" required placeholder="" autocomplete="off" min="2" max="10" class="layui-input">
				<span style="color: #FF5722;" id="userNickname_msg"></span>
			</div>
			<div class="layui-form-mid layui-word-aux"></div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">Email 
				<span style="color: #FF5722;">*</span>
			</label>
			<div class="layui-input-inline">
				<input type="email" name="userEmail" id="userEmail" required
					lay-verify="userEmail" class="layui-input"
					onblur="checkUserEmail()">
				<span style="color: #FF5722;" id="userEmail_msg"></span>
			</div>
			<div class="layui-form-mid layui-word-aux" id="userEmailTips"></div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">URL </label>
			<div class="layui-input-inline">
				<input type="url" name="userUrl" placeholder="" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="demo1"
					id="subm">保存</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</rapid:override>

<rapid:override name="frame-footer-script">
	<script type="text/javascript" src="resources/js/jquery.min.js"></script>
	<script>
	$(function(){
		//用户名验证
		$("#userName").blur(userNam);
		function userNam(){
			var r=false;
			var reg=/^[^\s]{4,20}$/;
			if( !reg.test($("#userName").val()) ){
				$("#userName_msg").html("用户名不合法.请输入4-20位字符");
				return r;
			}
			$.ajax({
				url:"user/yzUserName",
				type:"POST",
				data:{userName:$("#userName").val()},
				async:false,
				cache:false,
				dataType:"text",
				success:function(str){
					if(str==0){//没有该名字
						$("#userName_msg").html("");
						r=true;
					}else{
						$("#userName_msg").html("该名称已被占用");
					}
				}
			});
			return r;
		}
		
		//密码验证
		$("#userPass").blur(pass);
		function pass(){
			var r=false;
			var reg=/^[^\s]{6,20}$/;
			if( !reg.test($("#userPass").val()) ){
				$("#userPass_msg").html("密码不合法.请输入6-20位字符");
			}else{
				$("#userPass_msg").html("");
				r=true;
			}
			return r;
		}
		
		//昵称验证
		$("#userNickname").blur(userNicknam);
		function userNicknam(){
			var r=false;
			var reg=/^[^\s]{1,20}$/;
			if( !reg.test($("#userNickname").val()) ){
				$("#userNickname_msg").html("昵称不合法.请输入1-20位字符");
			}else{
				$("#userNickname_msg").html("");
				r=true;
			}
			return r;
		}
		
		//邮箱验证
		$("#userEmail").blur(userEmai);
		function userEmai(){
			var r=false;
			var email=$("#userEmail").val();
			$.ajax({
				url:"user/yzEmail",
				type:"POST",
				data:{userEmail:email},
				async:false,
				cache:false,
				dataType:"text",
				success:function(str){
					if(str==0){//没有该邮箱
						$("#userEmail_msg").html("");
						r=true;
					}else{
						$("#userEmail_msg").html("该邮箱已被占用");
					}
				}
			});
			return r;
		}
		
		//添加按钮
		$("#subm").click(function(){
			var r=true;

			if(!pass()){
				r=false;
			}
			
			if(!userNam()){
				r=false;
			}
			
			if(!userNicknam()){
				r=false;
			}
			
			if(!userEmai()){
				r=false;
			}
			
			if(r){
				r=confirm("确定添加吗");
			}
			return r;
		});
		
	});
	</script>
	<script>
		//预览图片  
		function preview(docObj, localImagId, imgObjPreview, width, height) {
			if (docObj.files && docObj.files[0]) { //火狐下，直接设img属性        
				imgObjPreview.style.display = 'block';
				imgObjPreview.style.width = width;
				imgObjPreview.style.height = height;
				//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式        
				imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
			} else { //IE下，使用滤镜      
				docObj.select();
				var imgSrc = document.selection.createRange().text;
				//必须设置初始大小        
				localImagId.style.width = width;
				localImagId.style.height = height;
				//图片异常的捕捉，防止用户修改后缀来伪造图片        
				try {
					localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
					localImagId.filters
							.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
				} catch (e) {
					alert("您上传的图片格式不正确，请重新选择!");
					return false;
				}
				imgObjPreview.style.display = 'none';
				document.selection.empty();
			}
		}
	</script>
</rapid:override>

<%@ include file="../framework.jsp"%>